<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="number" v-model.number="num" /> --
      <span>{{total}} -- {{msg}}</span>
      <hr />
      <button @click="setTotal(1)">++修改计算属性++</button>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            num: 100,
            msg: ''
          }
        },
        methods: {
          setTotal(n) {
            // console.log(this.total)
            this.total = '修改你，你会报错吗?'
          }
        },
        // 计算属性
        // 计算属性它必须要有返回值，返回值还不能是异步的
        // 它的依赖项可以有1个也可以是N个
        // 如果依赖项没有发生变化，在下一次调用时走上一次的缓存结果
        // 计算属性可以起到优化的作用
        computed: {
          // 简写方式，也是使用最多的
          // total() {
          //   return this.num >= 103 ? '保密' : this.num
          // }
          // 标准方式
          total: {
            get() {
              return this.num >= 103 ? '保密' : this.num
            },
            set(val) {
              // console.log(val)
              this.msg = val
            }
          }
        }
      })
      app.mount('#app')
    </script>
  </body>
</html>
